<template>
	<div>
		<el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
				<el-form-item label="用户信息">
					<el-input class="w-[280px]" v-model="queryParams.keyword" placeholder="姓名/手机号码" clearable
						@keyup.enter="resetPage" />
				</el-form-item>
				<el-form-item label="科室信息：" prop="department" >
					<el-cascader :options="optionsData.department" clearable v-model="queryParams.department" filterable  :props="props1"/>
				</el-form-item>
				<el-form-item label="注册时间">
					<daterange-picker v-model:startTime="queryParams.create_time_start"
						v-model:endTime="queryParams.create_time_end" />
				</el-form-item>
<!-- 				<el-form-item label="注册来源">
					<el-select class="w-[280px]" v-model="queryParams.channel">
						<el-option v-for="(item, key) in ClientMap" :key="key" :label="item" :value="key" />
					</el-select>
				</el-form-item> -->
				<el-form-item>
					<el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
					<export-data class="ml-2.5" :fetch-fun="getUserList" :params="queryParams"
						:page-size="pager.size" />
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="!border-none mt-4" shadow="never">
			<div>
				<router-link :to="{
			            path: getRoutePath('user.user/add')
			        }">
					<el-button type="primary" class="mb-4">
						<template #icon>
							<icon name="el-icon-Plus" />
						</template>
						添加
					</el-button>
				</router-link>
			</div>
			<el-table size="large" v-loading="pager.loading" :data="pager.lists">
				<el-table-column label="头像" min-width="100">
					<template #default="{ row }">
						<el-avatar :src="row.avatar" :size="50" />
					</template>
				</el-table-column>
				<el-table-column label="院区" prop="cname" min-width="120" />
<!--				<el-table-column label="账号" prop="account" min-width="120" />-->
				<el-table-column label="名称" prop="real_name" min-width="100" />
				<el-table-column label="联系方式" prop="mobile" min-width="100" />
        <el-table-column label="科室" prop="dname" min-width="120" />
<!--				<el-table-column label="注册来源" prop="channel" min-width="100" />-->
				<el-table-column label="注册时间" prop="create_time" min-width="120" />
				<el-table-column label="操作" width="120" fixed="right">
					<template #default="{ row }">
						<el-button v-perms="['user.user/detail']" type="primary" link>
							<router-link :to="{
                                    path: getRoutePath('user.user/detail'),
                                    query: {
                                        id: row.id
                                    }
                                }">
								详情
							</router-link>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>
	</div>
</template>
<script lang="ts" setup name="consumerLists">
	import { usePaging } from '@/hooks/usePaging'
	import { getRoutePath } from '@/router'
	import { getUserList } from '@/api/consumer'
	import { ClientMap } from '@/enums/appEnums'
	import { useDictOptions } from '@/hooks/useDictOptions'
	
	import {
		departmentList
	} from '@/api/room/room_department_device'
	const { optionsData } = useDictOptions<{
		department : any[]
	}>({
		department: {
			api: departmentList
		}
	})
	const props1 = {
	  checkStrictly: true,
	}
	
	const queryParams = reactive({
		keyword: '',
		channel: '',
		department:[],
		create_time_start: '',
		create_time_end: ''
	})

	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: getUserList,
		params: queryParams
	})
	onActivated(() => {
		getLists()
	})

	getLists()
</script>